{% include 'front/header1.html' %}
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=4cf311835bbf55ce280047af1fbd7c85&plugin=AMap.CitySearch"></script>
<style>
	#amapContainer{
		height: 500px;
	}
</style>
<header class="mui-bar mui-bar-nav" style="background: transparent !important;">
	<a class=" mui-icon mui-icon-left-nav mui-pull-left" id="back"></a>
	<h1 class="mui-title">地图</h1>
</header>
<div id="amapContainer">
</div>

{% include 'front/foot.html' %}
<script>
	mui.ready(function() {
		this.init();
	});

	function init() {
		// your code ...
			var _that = this;
			console.log(ykp.getUrlParam('data'))
			var lat = ykp.getUrlParam('lat')
			var lng = ykp.getUrlParam('lng')
			var km = parseInt(ykp.getUrlParam('km'))
			$('#amapContainer').css('height', document.body.clientHeight + 'px')
			
			 var zoom = ["50","100","200","500","1000","2000","5000","10000","20000","25000","50000","100000","200000","500000","1000000","2000000"]//级别18到3。
			 var _zoom = 0;
			if(1 <= km && km< 5){
				_zoom = 13;
			}else if(5 <= km && km< 9){
				_zoom = 11;
			}else if(9 <= km && km < 20){
				_zoom = 10;
			}
			this.map = new AMap.Map('amapContainer', {
				resizeEnable: false,
				center: new AMap.LngLat(lat, lng),
				 zoom: _zoom
			});
			AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() {
				 var marker = new AMap.Marker({
			        position: _that.map.getCenter(),
			        draggable: true,
			        cursor: 'move'
			    });
			    marker.setMap(_that.map);
			    marker.setAnimation('AMAP_ANIMATION_BOUNCE');
				var circle = new AMap.Circle({
						center: new AMap.LngLat(lat, lng), // 圆心位置
						radius: km * 1000, //半径
						strokeColor: "#1791fc", //线颜色
						strokeOpacity: 0.4, //线透明度
						strokeWeight: 3, //线宽
						fillColor: "#1791fc", //填充色
						fillOpacity: 0.05, //填充透明度
					});
					circle.setMap(_that.map); //显示圆圈
					
			});
	}
</script>